<script setup lang="ts">
import { reactive, ref } from 'vue'
import type { UserVO, AdminUpdateParams } from '@/api/User.ts'
import { UserApi } from '@/api/UserApi.ts'
import type { FormInstance, Rule } from 'ant-design-vue/es/form'
import { message } from 'ant-design-vue'

const props = defineProps<{
  user: UserVO
}>()

const emit = defineEmits<{
  (e: 'close'): void
  (e: 'success'): void
}>()

const formRef = ref<FormInstance>()
const loading = ref(false)

const form = reactive<AdminUpdateParams>({
  userId: props.user.id,
  name: props.user.name,
  gender: props.user.gender,
  profile: props.user.profile,
  email: props.user.email,
  role: props.user.role,
})

// 表单校验规则
const rules: Record<string, Rule[]> = {
  name: [
    { required: true, message: '请输入昵称', trigger: 'blur' },
    { 
      validator: (_, value) => {
        if (!value) return Promise.resolve()
        if (value.length < 4 || value.length > 30) {
          return Promise.reject(new Error('昵称长度4-30位'))
        }
        if (!/^[a-zA-Z\u4e00-\u9fa50-9_]+$/.test(value)) {
          return Promise.reject(new Error('昵称只能包含字母、中文、数字和下划线'))
        }
        return Promise.resolve()
      },
      trigger: 'blur'
    }
  ],
  gender: [
    { required: true, message: '请选择性别', trigger: 'change' },
    {
      validator: (_, value) => {
        if (value === null || value === undefined || value < 0 || value > 2) {
          return Promise.reject(new Error('性别错误'))
        }
        return Promise.resolve()
      },
      trigger: 'change'
    }
  ],
  email: [
    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
  ],
  profile: [
    {
      validator: (_, value) => {
        if (value && value.length > 512) {
          return Promise.reject(new Error('简介长度不能超过512位'))
        }
        return Promise.resolve()
      },
      trigger: 'blur'
    }
  ],
  role: [
    { required: true, message: '请选择角色', trigger: 'change' }
  ]
}

const onSubmit = async () => {
  try {
    await formRef.value?.validate()
    loading.value = true
    const success = await UserApi.updateUser(form)
    if (success) {
      message.success('修改成功')
      emit('success')
      emit('close')
    } else {
      message.error('修改失败')
    }
  } catch (error) {
    console.error('表单校验失败:', error)
  } finally {
    loading.value = false
  }
}
</script>

<template>
<a-form ref="formRef" :model="form" :rules="rules" layout="vertical">
  <a-form-item label="昵称" name="name">
    <a-input v-model:value="form.name" placeholder="输入昵称" />
  </a-form-item>
  <a-form-item label="性别" name="gender">
    <a-radio-group v-model:value="form.gender">
      <a-radio :value="0">男</a-radio>
      <a-radio :value="1">女</a-radio>
    </a-radio-group>
  </a-form-item>
  <a-form-item label="邮箱" name="email">
    <a-input v-model:value="form.email" placeholder="输入邮箱" />
  </a-form-item>
  <a-form-item label="简介" name="profile">
    <a-textarea v-model:value="form.profile" :rows="3" placeholder="输入简介" />
  </a-form-item>
  <a-form-item label="角色" name="role">
    <a-select v-model:value="form.role" placeholder="选择角色">
      <a-select-option value="ROLE_USER">用户</a-select-option>
      <a-select-option value="ROLE_ADMIN">管理员</a-select-option>
      <a-select-option value="ROLE_SUPER_ADMIN">超级管理员</a-select-option>
    </a-select>
  </a-form-item>
  <a-space>
    <a-button type="primary" :loading="loading" @click="onSubmit">保存</a-button>
    <a-button @click="$emit('close')">取消</a-button>
  </a-space>
</a-form>
</template>

<style scoped>

</style>
